<template>
  <div class="categoryContent">
    <h4>{{kind}}</h4>
    <div class="main">
      <ul>
        <li v-for="(item,index) in products" :key="index">
          <img :src="item.src" />
          <div class="title">{{item.title}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kind: "热门品牌",
      products: [
        {
          src:
            "http://img30.360buyimg.com/focus/s140x140_jfs/t13411/188/926813276/3945/a4f47292/5a1692eeN105a64b4.png",
          title: "小米"
        },
        {
          src:
            "//img14.360buyimg.com/focus/s140x140_jfs/t11929/135/2372293765/1396/e103ec31/5a1692e2Nbea6e136.jpg",
          title: "华为"
        },
        {
          src:
            "//img10.360buyimg.com/focus/s140x140_jfs/t12178/348/911080073/4732/db0ad9c7/5a1692e2N6df7c609.jpg",
          title: "荣耀"
        },
        {
          src:
            "//img20.360buyimg.com/focus/s140x140_jfs/t13759/194/897734755/2493/1305d4c4/5a1692ebN8ae73077.jpg",
          title: "iPhone"
        },
        {
          src:
            "//img11.360buyimg.com/focus/s140x140_jfs/t11014/359/2341377211/2777/1755c29c/5a169244Nff0179e0.png",
          title: "vivo"
        },
        {
          src:
            "//img13.360buyimg.com/focus/s140x140_jfs/t13036/273/932026474/2570/a3517c7d/5a169254N4bbbd9fb.png",
          title: "oppo"
        },
        {
          src:
            "//img20.360buyimg.com/focus/s140x140_jfs/t12820/326/909017718/7138/68cde747/5a169243N40eca33c.jpg",
          title: "魅族"
        },
        {
          src:
            "//img13.360buyimg.com/focus/s140x140_jfs/t11509/131/2348573811/3425/4f20fe6/5a16925aN8a6dfd03.png",
          title: "三星"
        },
        {
          src:
            "//img13.360buyimg.com/focus/s140x140_jfs/t11209/71/2351231464/4158/fc0c415c/5a16923fNfc14307e.jpg",
          title: "一加"
        },
        {
          src:
            "//img20.360buyimg.com/focus/s140x140_jfs/t13096/309/908035611/5138/5558f001/5a16924fNeac7677e.jpg",
          title: "360手机"
        },
        {
          src:
            "//img20.360buyimg.com/focus/s140x140_jfs/t19387/332/664528115/8176/5eabe8cb/5a9fa5e0N6754e52a.jpg",
          title: "锤子手机"
        },
        {
          src:
            "//img12.360buyimg.com/focus/s140x140_jfs/t15085/289/2395028996/2546/1e7e1f7b/5a9fa5e7Nc5cc0f6b.jpg",
          title: "努比亚"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.categoryContent {
  width: 100%;
  margin: 19px 7px 0;
  box-sizing: border-box;
//   background: pink;
  text-align: left;

  .main {
    width: 100%;
    margin-top: 9px;
    padding: 7px 10px 0;
    box-sizing: border-box;

    ul {
      width: 100%;
      overflow: hidden;
      zoom: 1;

      li {
        width: calc(100% / 3);
        float: left;
        text-align: center;

        img {
          width: 70px;
          height: 70px;
        }
        .title {
          margin-top: 2px;
          height: 35px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>